<template>
  <div class="container"
       v-title
       data-title='修改密码'>
    <ul class="list-info-view">
      <li>
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">旧密码</label>
            <div class="row-content">
              <input type="password"
                     placeholder="请输入旧密码"
                     v-model="oldpwd"
                     @focus="handleFocus"
                     @blur="handleBlur" />
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">新密码</label>
            <div class="row-content">
              <input type="password"
                     placeholder="请输入8~20位新密码"
                     v-model="newpwd"
                     @focus="handleFocus"
                     @blur="handleBlur" />
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">确认密码</label>
            <div class="row-content">
              <input type="password"
                     placeholder="请再次输入新密码"
                     v-model="confrmpwd"
                     @focus="handleFocus"
                     @blur="handleBlur" />
            </div>
          </div>
        </div>
      </li>
    </ul>
    <button class="btn-block mT120"
            v-on:click="save">保存</button>
  </div>
</template>
<script >
export default {
  data() {
    return {
      oldpwd: "",
      newpwd: "",
      confrmpwd: ""
    };
  },
  mounted: function () {},
  methods: {
    save: function () {
      var _self = this;
      if (_self.pwdValidate() == true) {
        var body = {};
        body.params = {
          oldPassword: _self.oldpwd,
          newPassword: _self.newpwd,
          confirmPassword: _self.confrmpwd
        };
        var url = this.utilHelper.apiUrl + "/api/updatePwd";
        _self.$http.post(url, body).then((response) => {
          var body = response.body;
          if (body.result == 1) {
            layer.msg(
              "修改成功",
              {
                time: 1000
              },
              function () {
                _self.quit();
              }
            );
          } else if (body.result == 0) {
            layer.msg(body.resData.resultMsg);
          }
        });
      }
    },
    pwdValidate() {
      var _self = this;
      var oldpwd = _self.oldpwd;
      var newPwd = _self.newpwd;
      var confrmpwd = _self.confrmpwd;
      var pwdReg = /^.{8,20}$/;
      if (!oldpwd) {
        layer.msg("旧密码不能为空!", {
          time: 2000
        });
        return false;
      }
      if (!pwdReg.test(newPwd)) {
        layer.msg("新密码长度必须在8~20位之间!", {
          time: 2000
        });
        return false;
      }
      if (newPwd != confrmpwd) {
        layer.msg("两次密码输入不一致!", {
          time: 2000
        });
        return false;
      }
      return true;
    },
    quit: function () {
      var _self = this;
      var body = {};
      var params = { userId: window.localStorage.getItem("3_userId") };
      body.params = params;
      var url = _self.utilHelper.apiUrl + "/api/loginOut";
      _self.$http.post(url, body).then(
        (response) => {
          var data = response.body;
          var result = data.result;
          var resData = data.resData;
          window.localStorage.setItem("3_isLogin", false);
          _self.$router.replace({
            path: "/login"
          });
        },
        (response) => {}
      );
    },
    handleFocus: function () {
      document.getElementById("goble_menu_div").style.display = "none";
    },
    handleBlur: function () {
      document.getElementById("goble_menu_div").style.display = "block";
    }
  }
};
</script>
